<template>
  <div class="indexBox">
    <el-container>
      <el-header class="header"
        >啥都有商城后台管理系统
        <el-dropdown
          class="select"
          trigger="click"
          split-button
          type="primary"
          @command="change"
        >
          <span class="el-dropdown-link">
            {{ name }}
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>安全退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-header>

      <el-container>
        <v-nav></v-nav>

        <el-container>
          <el-main class="main">
            <router-view></router-view>
          </el-main>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>


<script>
import { Message } from 'element-ui';
import vNav from "../components/vNav.vue";
export default {
  data() {
    return {
      name: sessionStorage.getItem("userInfo")
        ? JSON.parse(sessionStorage.getItem("userInfo")).username
        : "",
    };
  },

  //方法
  methods: {
    change(){
      // console.log(123);
      //清除储存
      this.$store.commit('changeUserInfo',false);
      //退出到登录页
      this.$router.push('/login');
      //提示退出成功
      Message.success('成功退出');
    }
  },

  components: {
    vNav,
  },
};
</script>


<style lang='less' scoped>
.indexBox {
  .header {
    text-align: center;
    line-height: 60px;
    background: #518ecb;
    color: #fff;
    font-size: 20px;
    font-family: kaiti;
    .select {
      float: right;
    }
  }

  .main {
    max-height: 100vh;
  }
}
</style>